<template>
  <div>

    <el-card class="hr-block">

      <!-- 前面内容 -->
      <template>
        <el-row type="flex">
          <el-col>
            <div>有 0条考勤审批尚未处理</div>
          </el-col>
          <el-col>
            <el-button size="mini" type="danger" @click="$router.push('/import?type=attendance')">导入</el-button>
            <el-button size="mini" type="warning">提醒</el-button>
            <el-button size="mini" type="primary">设置</el-button>
            <el-button size="mini" type="default" @click="$router.push('/attendances/archiving/')">历史归档</el-button>
            <el-button size="mini" type="primary" @click="$router.push({'path':'/attendances/report/'})">报表</el-button>

          </el-col>
        </el-row>
      </template>

      <el-form ref="formData" label-width="120px" class="formInfo">
        <el-form-item label="部门:">
          <el-checkbox-group v-model="checkList" @change="checkchange">
            <el-checkbox v-for="(item,index) in newList" :key="index" :label="item" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="考勤状态">
          <el-radio-group v-model="radioList" @change="checkchange">
            <el-radio v-for="item in stateData.holidayType" :key="item.id" :label="item.id">
              {{ item.value }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 考勤数据 -->
    <el-card class="hr-block">
      <!-- 考勤列表 -->
      <div style="width:100%;position: relative;overflow-x: auto; overflow-y: hidden;">
        <div style="width: 3000px;">
          <table border="1" align="left" cellpadding="0" cellspacing="0" class="tableInfo">
            <tr>
              <th width="50">序号</th>
              <th width="100">姓名</th>
              <th width="100">工号</th>
              <th width="200">部门</th>
              <th width="100">手机</th>
              <th v-for="item in list[0]?list[0].attendanceRecord :[]" :key="item.id">{{ item.day|newDate }}</th>
            </tr>
            <tr v-for="(item,index) in pageList" :key="item.id" align="center">
              <td width="50">{{ index+1 }}</td>
              <td width="100">{{ item.username }}</td>
              <td width="100">{{ item.workNumber }}</td>
              <td width="200">{{ item.departmentName }}</td>
              <td width="100">{{ item.mobile }}</td>
              <td v-for="normal in item.attendanceRecord " :key="normal.id" width="100">
                <span v-if="normal.adtStatu===1">正常</span>
                <span v-if="normal.adtStatu===2">旷工</span>
                <span v-if="normal.adtStatu===3">事假</span>
                <span v-if="normal.adtStatu===4">调休</span>
                <span v-if="normal.adtStatu===5">迟到</span>
                <span v-if="normal.adtStatu===6">早退</span>

              </td></tr>
          </table>
        </div>

      </div>

      <!-- 分页组件 -->
      <el-row type="flex" align="middle" justify="center" style="height: 60px">
        <el-pagination
          :page-size="pageSetting.size"
          :total="reformlist.length"
          :current-page="currpage"
          layout="prev, pager, next"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>

import { getAttendancesMock } from '@/api/attendances'
import attendanceApi from '@/api/constant/attendance'
export default {
  name: 'Attendances',
  filters: {
    newDate(val) {
      const date = val.toString()
      const arr = date.slice(4, 6) + '-' + date.slice(6)

      return arr
    }
  },
  data() {
    return {

      newList: [],
      list: [], // 总数据
      checkList: [], // 被选中的部门
      radioList: [], // 考勤状态
      stateData: attendanceApi,
      currpage: 0,
      reformlist: [], // 过滤后的数据
      pageSetting: {
        page: 1,
        size: 10
      }

    }
  },
  // 计算属性
  computed: {
    pageList() {
      // 结束下标
      const endindex = this.pageSetting.page * this.pageSetting.size
      // 开始下标 结束减去最后页码
      const starindex = endindex - this.pageSetting.size
      return this.reformlist.slice(starindex, endindex)
    }
  },
  async created() {
    // console.log(888)
    this.getAttendancesMock()
  },
  methods: {
    // 请求数据函数封装
    async getAttendancesMock() {
      // 发起请求
      const res = await getAttendancesMock()
      this.list = res
      // console.log(133, res)
      // 页面进来过滤列表等于总列表
      this.reformlist = res
      // 部门
      // 过滤所有的部门
      const arr = []
      res.forEach(item => {
        arr.push(item.departmentName)
      })
      const newarr = [...new Set(arr)]
      this.newList = newarr
    },
    // 点击分页
    currentChange(data) {
      // 修改页数，计算属性发生变化分页完成
      this.pageSetting.page = data
    },
    // 点击多选款/单选框触发
    async checkchange() {
      if (this.checkList.length === 0) {
        // 如果没有选中则过滤列表等于总列表
        this.reformlist = this.list
      } else {
        // 否则则过滤出合适的数据渲染在列表
        const arr = this.list.filter(item => this.checkList.includes(item.departmentName))
        console.log(168, arr)
        // this.list = arr
        this.reformlist = arr
      }

      // console.log(169, this.reformlist)
      //  [ ...this.list] = newarr

      // 上面是总数据
      // 以下是过滤后的数据
      // 依赖筛选后的数据
      this.reformlist = this.reformlist.map(user => {
        return {
          ...user,
          // 封装传一个数组进去
          attendanceRecord: this.convertRecord(user.attendanceRecord)

        }
      })
    },
    // 封装考勤函数
    convertRecord(attendanceRecord) {
      const res = attendanceRecord.map(user => {
        return { ...user,
        // 判定在单选框列表中有没有找到当前的考勤状态
          adtStatu: this.radioList.includes(user.adtStatu.toString()) ? user.adtStatu : 0
        }
      })
      // 返回过滤后的数据
      return res
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
